/**
 * 通用UI的使用
 * */
import {useState} from "react";
import {LoginState} from "./LoginUI";
import {MainFragment} from "./MainPageUI";
import {BlogFragment, CreateBlogFragment} from "./BlogPageUI";
import {Route, Routes, useNavigate} from "react-router-dom";
import {NAVI_BLOG, NAVI_BLOG_CREATE, NAVI_GIT, NAVI_MAIN} from "../constant/MainNavi";


export function AppTopBar(props) {

    const [select, setSelect] = useState(props.items[0])
    const navigate = useNavigate();
    let arr = props.items.map(item => <a className="App-Navigation-Bar-Item"
                                         style={{color: select === item ? "blue" : "black"}}
                                         onClick={() => {
                                             if (item === select) {
                                                 //重复选择
                                                 props.onRepeatClickNavi(select)
                                                 return;
                                             }
                                             if (item.navi === NAVI_GIT) {
                                                 window.open("https://gitee.com/zjwjustforlife")
                                                 return
                                             }
                                             navigate(item.navi, {replace: true})
                                             setSelect(item)
                                         }}>{item.title}</a>)
    return (<div className="TopBar-Content">
        <h1><a className="TopBar-Title" href={NAVI_MAIN}>{props.title}</a></h1>
        <ul className="App-Navigation-Bar">
            <li style={{height: "100%", listStyle: "none"}}>
                {arr}
            </li>
        </ul>
        <LoginState state={props.loginState} onClick={props.onLoginStateClick}/>
    </div>)
}


export function AppContent(props) {
    return <div className={"App-Content"}>
        <Routes>
            <Route path={NAVI_MAIN} element={<MainFragment/>}></Route>
            <Route path={NAVI_BLOG} element={<BlogFragment/>}></Route>
            <Route path={NAVI_BLOG_CREATE} element={<CreateBlogFragment/>}></Route>
        </Routes>
    </div>
}
